<template>
  <div class="app-container">
    <div class="topform">
      <el-form ref="QueryForm" :model="QueryForm" @submit.native.prevent>
        <el-form-item label="客户姓名" label-width="80px" style="width: 200px;float: left">
          <el-input v-model="QueryForm.user_name" clearable autocomplete="off" />
        </el-form-item>
        <el-form-item label="售后专员" label-width="80px" style="width: 170px;float: left">
          <el-select clearable v-model="QueryForm.customer_uid">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in customers" :label="item.u_name" :value="item.uid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="技术售后" label-width="80px" style="width: 170px;float: left">
          <el-select clearable v-model="QueryForm.technology_uid">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in technologys" :label="item.u_name" :value="item.uid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报修类型" label-width="80px" style="width: 250px;float: left">
          <el-cascader clearable placeholder="请选择报修类型" v-model="QueryForm.repairtype" :options="typedata"
            :props="propstype"></el-cascader>
        </el-form-item>
        <el-form-item label="处理状态" label-width="80px" style="width: 180px;float: left">
          <el-select clearable v-model="QueryForm.repair_handle_state" placeholder="请选择处理状态">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in states" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机器类型" label-width="80px" style="width: 150px;float: left">
          <el-select clearable v-model="QueryForm.mch_type">
            <el-option label="全部" value=""></el-option>
            <el-option label="IC" value="IC"></el-option>
            <el-option label="IC2" value="IC2"></el-option>
            <el-option label="按键机" value="按键机"></el-option>
            <el-option label="按键转4G" value="按键转4G"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机器SN" label-width="80px" style="width: 180px;float: left">
          <el-input v-model="QueryForm.mch_sn" clearable autocomplete="off" />
        </el-form-item>
        <el-form-item label="审批人" label-width="70px" style="width: 170px;float: left">
          <el-select clearable v-model="QueryForm.approval_uid">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in approvals" :label="item.u_name" :value="item.uid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题属性" label-width="80px" style="width: 170px;float: left">
          <el-select clearable v-model="QueryForm.iswork">
            <el-option label="全部" value=""></el-option>
            <el-option label="非生产" :value="0"></el-option>
            <el-option label="生产原因" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理时间" label-width="80px" style="width: 400px;float: left">
          <el-date-picker style="float: left;width: 45%" v-model="QueryForm.repair_handle_endtime_sdt"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable type="date">
          </el-date-picker>
          <div style="float: left;margin: 0 5px">至</div>
          <el-date-picker style="float: left;width: 45%" v-model="QueryForm.repair_handle_endtime_edt"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable type="date">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报修时间" label-width="80px" style="width: 400px;float: left">
          <el-date-picker style="float: left;width: 45%" v-model="QueryForm.repair_sdt" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" clearable type="datetime">
          </el-date-picker>
          <div style="float: left;margin: 0 5px">至</div>
          <el-date-picker style="float: left;width: 45%" v-model="QueryForm.repair_edt" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" clearable type="datetime">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="返件类型" label-width="80px" style="width: 170px;float: left">
          <el-select clearable v-model="QueryForm.return_type">
            <el-option label="全部" value=""></el-option>
            <el-option label="同意返件" :value="1"></el-option>
            <el-option label="不同意返件" :value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="返件状态" label-width="80px" style="width: 170px;float: left">
          <el-select clearable v-model="QueryForm.return_state">
            <el-option v-for="item in fanarr" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="	返件物品状态" label-width="120px" style="width: 210px;float: left">
          <el-select clearable v-model="QueryForm.return_goods_state">
            <el-option label="合格" :value="0"></el-option>
            <el-option label="缺件错件" :value="1"></el-option>
            <el-option label="未处理" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <div style="float: left">
          <el-button native-type="submit" type="primary" style="margin-left: 20px" icon="el-icon-search"
            @click="Query(true)">搜索
          </el-button>
          <el-button type="primary" @click="excel(true)">导出</el-button>
        </div>
      </el-form>
    </div>
    <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" :data="list" border
      element-loading-text="加载中···" highlight-current-row>
      <el-table-column :resizable="true" fixed type="index" width="40">
      </el-table-column>
      <el-table-column align="center" width="65" fixed :resizable="true" label="报修时间">
        <template slot-scope="scope">
          {{ scope.row.repair_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" fixed :resizable="true" label="客户姓名">
        <template slot-scope="scope">
          {{ scope.row.user_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="65" fixed :resizable="true" label="机器类型">
        <template slot-scope="scope">
          {{ scope.row.mch_type }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="75" fixed :resizable="true" label="机器SN">
        <template slot-scope="scope">
          {{ scope.row.mch_sn }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" fixed :resizable="true" label="机器名称">
        <template slot-scope="scope">
          {{ scope.row.mch_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="63" fixed :resizable="true" label="质保开始时间">
        <template slot-scope="scope">
          {{ scope.row.mch_assurance_sdt }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" fixed :resizable="true" label="报修类型">
        <template slot-scope="scope">
          {{ scope.row.repair_type }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" fixed :resizable="true" label="报修小类">
        <template slot-scope="scope">
          {{ scope.row.repair_kid_type }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" fixed :resizable="true" label="问题描述">
        <template slot-scope="scope">
          {{ scope.row.repair_des }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="售后专员">
        <template slot-scope="scope">
          {{ scope.row.customer_uname }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="250" label="处理结果">
        <template slot-scope="scope">
          {{ scope.row.customer_repair_handle_result }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="问题属性">
        <template slot-scope="scope">
          <span v-if="scope.row.iswork===0">非生产</span>
          <span v-if="scope.row.iswork===1">生产原因</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="技术售后">
        <template slot-scope="scope">
          {{ scope.row.technology_uname }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="处理状态">
        <template slot-scope="scope">
          {{ scope.row.repair_handle_state_str }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="90" label="处理时间">
        <template slot-scope="scope">
          {{ scope.row.repair_handle_endtime }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="审批人">
        <template slot-scope="scope">
          {{ scope.row.approval_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="90" label="审批时间">
        <template slot-scope="scope">
          {{ scope.row.repair_approval_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="寄件单号">
        <template slot-scope="scope">
          {{ scope.row.express_no }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="返件状态">
        <template slot-scope="scope">
          {{ scope.row.return_state_str }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="返件物品状态">
        <template slot-scope="scope">
          {{ scope.row.return_goods_state_str }}
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" width="100" label="返件类型">
        <template slot-scope="scope">
          {{ scope.row.return_type_str }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="center" width="110" label="返件审批状态">
        <template slot-scope="scope">
          {{ scope.row.return_approval_state_str }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="250" label="返件审批备注">
        <template slot-scope="scope">
          {{ scope.row.return_approval_des }}
        </template>
      </el-table-column> -->
      <el-table-column align="center" width="100" label="返件单号">
        <template slot-scope="scope">
          {{ scope.row.return_express_no }}
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" width="80" label="审批人">
        <template slot-scope="scope">
          {{ scope.row.return_approval_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="90" label="审批时间">
        <template slot-scope="scope">
          {{ scope.row.approval_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="50" label="提交次数">
        <template slot-scope="scope">
          {{ scope.row.return_sort }}
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination style="text-align: center" layout="prev, pager, next" small :current-page="QueryForm.page"
        :page-size="QueryForm.pagesize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script type="es6">
import Cookies from "js-cookie";
import { Loading } from "element-ui";

export default {
  data() {
    return {
      fanarr: [{
        label: '已返件',
        value: 0
      }, {
        label: '未返件',
        value: 1
      }, {
        label: '无需返件',
        value: 2
      }, {
        label: '无返件',
        value: 3
      }],
      QueryForm: {
        repairtype: [],
        return_state: '',
        return_goods_state: '',
        user_name: '',
        customer_uid: '',
        technology_uid: '',
        mch_type: '',
        mch_sn: '',
        repair_sdt: '',
        repair_edt: '',
        repair_handle_state: '',
        repair_handle_endtime_sdt: '',
        repair_handle_endtime_edt: '',
        mch_assurance_sdt_sdt: '',
        mch_assurance_sdt_edt: '',
        repair_approval_time_sdt: '',
        repair_approval_time_edt: '',
        approval_uid: '',
        apply_state: '',
        return_type: '',
        return_approval_state: '',
        return_sort: '',
        iswork: '',
        isPage: true,
        page: 1,
        pagesize: 10,
      },
      propstype: {
        value: "label",
        label: "label",
        children: "children"
      },
      typedata: [],
      technologys: [],
      customers: [],
      states: [],
      approvals: [],
      list: [],
      total: 0,
      Loading: true,
    };
  },
  created() {
    this.Query();
    this.gettype();
    this.getcustomer();
    this.gettechnology();
    this.getstate();
    this.getapproval();
  },
  methods: {
    Query(isquery) {
      if (isquery === true) {
        this.QueryForm.page = 1
      }
      this.Loading = true
      this.$post(this.$api + '/repair/get_repair_pagelist_for_excel', {
        return_state: this.QueryForm.return_state,
        return_goods_state: this.QueryForm.return_goods_state,
        repair_type: this.QueryForm.repairtype[0],
        repair_kid_type: this.QueryForm.repairtype[1],
        user_name: this.QueryForm.user_name,
        customer_uid: this.QueryForm.customer_uid,
        technology_uid: this.QueryForm.technology_uid,
        mch_type: this.QueryForm.mch_type,
        mch_sn: this.QueryForm.mch_sn,
        repair_sdt: this.QueryForm.repair_sdt,
        repair_edt: this.QueryForm.repair_edt,
        repair_handle_state: this.QueryForm.repair_handle_state,
        repair_handle_endtime_sdt: this.QueryForm.repair_handle_endtime_sdt,
        repair_handle_endtime_edt: this.QueryForm.repair_handle_endtime_edt,
        mch_assurance_sdt_sdt: this.QueryForm.mch_assurance_sdt_sdt,
        mch_assurance_sdt_edt: this.QueryForm.mch_assurance_sdt_edt,
        repair_approval_time_sdt: this.QueryForm.repair_approval_time_sdt,
        repair_approval_time_edt: this.QueryForm.repair_approval_time_edt,
        approval_uid: this.QueryForm.approval_uid,
        apply_state: this.QueryForm.apply_state,
        return_sort: this.QueryForm.return_sort,
        return_type: this.QueryForm.return_type,
        return_approval_state: this.QueryForm.return_approval_state,
        iswork: this.QueryForm.iswork,
        isPage: this.QueryForm.isPage,
        page: this.QueryForm.page,
        pagesize: this.QueryForm.pagesize,
      })
        .then((res) => {
          this.Loading = false;
          if (res.code === 0) {
            this.list = res.rows;
            this.total = res.total;
            for (var i in this.list) {
              if (this.list[i].repair_time !== null) {
                this.list[i].repair_time = this.list[i].repair_time.substring(0, 10)
              }
              if (this.list[i].mch_assurance_sdt !== null) {
                this.list[i].mch_assurance_sdt = this.list[i].mch_assurance_sdt.substring(0, 10)
              }
              if (this.list[i].repair_handle_endtime !== null) {
                this.list[i].repair_handle_endtime = this.list[i].repair_handle_endtime.substring(0, 10)
              }
              if (this.list[i].repair_approval_time !== null) {
                this.list[i].repair_approval_time = this.list[i].repair_approval_time.substring(0, 10)
              }
              if (this.list[i].approval_time !== null) {
                this.list[i].approval_time = this.list[i].approval_time.substring(0, 10)
              }
            }
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    getapproval() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'approval'
      })
        .then((res) => {
          if (res.code === 0) {
            this.approvals = res.data;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    gettype() {
      this.$get(this.$api + '/repair/get_type')
        .then((res) => {
          if (res.code === 0) {
            this.typedata = res.data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    gettechnology() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'technology',
      })
        .then((res) => {
          if (res.code === 0) {
            this.technologys = res.data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    getcustomer() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'customer',
      })
        .then((res) => {
          if (res.code === 0) {
            this.customers = res.data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    getstate() {
      this.$post(this.$api + '/RK/enum_list', ['repair_handle_state'])
        .then((res) => {
          if (res.code === 0) {
            this.states = res.data[0].data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    excel() {
      this.$downloadpost(this.$api + '/repair/down_repair_pagelist_for_excel', this.QueryForm, true)
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.Query();
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.Query();
    },
  }
};
</script>
